<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <script type='text/javascript' src='../js/vue.js'></script>
    <script type='text/javascript' src='../js/vue-router.js'></script>
</head>

<body>
    <div id='app'>
        <router-link to="/aa">aa</router-link>
        <router-link to="/bb">bb</router-link>
        <router-link to="/qq?qid=123">qid</router-link>
        <router-link to="/qq?qid=123&uid=456">uid</router-link>
        <router-link :to="{name:'aa1',params:{id:4444},query:{name:'jack'}}">name</router-link>   
        <!-- // /aa1/444?name=jack -->


        <router-view></router-view>
    </div>
    <script type='text/javascript'>

        var aa = {
            template: `<h1>我是aa组件==={{$route.params.id}}===={{$route.query.name}}==</h1>`,

        }
        var qq = {
            template: `<h1>我是qq组件=={{$route.query.qid}}={{$route.query.uid}}==</h1>`,

        }
        var cc = {
            data() {
                return {
                    ps: {}
                }
            },
            template: `<h1>我是cc组件=={{$route.params.ids}}={{$route.params.name}}=={{$route.params.age}}===~~~~~~={{ps.name}}=</h1>`,
            // props:['ids','id','name','age']
            created() {
                console.log(this.$route.params, 7788);
                this.ps = this.$route.params
            }
        }

        var bb = {
            data() {
                return {
                    flag: false
                }
            },
            template: `<h1>我是bb组件==     
                    <p><span v-show='flag'>《 </span>返回</p>
                    <router-link to="/cc/1/jack/12">cc</router-link>
                    <router-link to="/cc/2/tom/13">dd</router-link>
                    <router-view></router-view>
                ===</h1>`,
            watch: {
                "$route.path"(newVal, oldVal) {
                    console.log(newVal, oldVal);
                    if (newVal == '/cc/1') {
                        this.flag = false
                    } else {
                        this.flag = true
                    }
                }
            },
        }

        var router = new VueRouter({
            routes: [
                { path: '/', redirect: '/aa' },
                {
                    path: '/aa/:aa2', component: aa,
                    name:'aa1'

                },
                {
                    path: '/qq', component: qq

                },
                {
                    path: '/bb', component: bb, children: [
                        // { path: '/cc/:ids', component: cc,props:true },
                        // { path: '/cc/:ids', component: cc,props:{id:22,name:'jack',age:18} },
                        // { path: '/cc/:ids', component: cc,props:route=>({id:22,name:'jack',age:18} )},
                        { path: '/cc/:ids/:name/:age', component: cc, },
                    ]
                },
            ]
        })

        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue',
                flag: false
            },
            router,
            components: {
                aa,
                bb
            },

        });
    </script>
</body>

</html>